/**
* @file mooDiapo-1.0.js
* @author Stephane Carlier
* @date September 8, 2009
* 
* MooDiapo takes all the links passed as argument and makes a cool slideshow with them
* example: var diapo = new MooDiapo($('content'), $$('.thumb'));
* 
* $('content') will be the area of the slideshow
* $$('.thumb') are all the links on the thumbs in the page -> should be the following pattern : 
* <a href="#" rel="img/roof_big.jpg" class="thumb"><img src="img/roof.jpg" alt="" /></a>
* the rel property contains the big image version reference
*
* CSS could be updated as your convenience 
*
*/
var MooDiapo = new Class({
	Implements: Options,
	
	options:{
		interval : 5000
	},
	
	initialize : function(el, links, options){
		this.container = el;
		this.links = links;
		this.thumbs = links.getElement('a'); 
		this.setOptions(options);
		this.seeNextTimer;
		this.currentIndex;
		this.img;
		this.src = new Array();
		
		this.layer = new Element('div', {
			'class' : 'slideshow',
			'id' : 'overlay'
		});

		this.p = new Element('p', {'styles' : {'text-align' : 'center'}});

		this.btnNext = new Element('a', {'id' : 'btnNext'});
		this.btnPrevious = new Element('a', {'id' : 'btnPrevious'});
		this.btnClose = new Element('a', {'id' : 'slideshowClose'});
		
		this._generateDiapo(this.links);
		
	
	},
	
	_killDiapo : function(){
		this.layer.dispose();
	},
	
	_getCurrentIndex : function(elt, tab){
		for(i=0; i<tab.length; i++){
			if(elt.get('src') == tab[i].get('rel')) return i;
		}
	},
	
	_getInitialCurrentIndex : function(elt, tab){
		for(i=0; i<tab.length; i++){
			if(elt.get('rel') == tab[i].get('rel')){ 
				return i;
			}
		}
	},
	
	_changeImg : function(){
		if(this.currentIndex < (this.thumbs.length-1)){ 
			var thumb = this.src[this.currentIndex+1];
		}else{ 
			var thumb = this.src[0];
		}
		
		this.img.set('src', thumb);
		
		var assetThumbs = new Asset.images(thumb, {
			onComplete : function(){
				this.img.dispose();
				this.img = new Element('img', {
										'src' : thumb,
										'opacity' : 0
									});
								
				this.img.inject(this.p, 'top');
				var marginT = (this.container.getSize().y - this.img.getSize().y) / 2;
				
				this.img.setStyles({
					'margin-top' : marginT
				});
				this.img.fade(1);
			}.bind(this)
		
		}, this);
		
	},
	
	_seeNext : function(){ 
		this.currentIndex = this._getCurrentIndex(this.img, this.links);
		this.img.fade(0);
		this._changeImg.delay(500, this);
	},
	
	
	_generateDiapo : function(links){
		
		this.links.each(function(link){ 
			this.src.push(link.get('rel')); 
		}, this);
		
		var assetThumbs = new Asset.images(this.src, {
				
				onComplete : function(){
					links.each(function(link){
					
							var onClick = function(event){
							
								this.layer.dispose();
								this.layer.destroy();
								
								this.layer.inject(this.container, 'top');
								this.p.inject(this.layer, 'top');

								this.layer.fade('hide');
								this.layer.fade(1);

								this.btnNext.inject(this.layer, 'top');
								this.btnPrevious.inject(this.layer, 'top');
								this.btnClose.inject(this.layer, 'top');
							
								// ** close function  ** // **
								var onBtnClose = function(){
									this.layer.fade(0);
									$clear(this.seeNextTimer);
									this._killDiapo.delay(500, this);
								}
							
								this.btnClose.addEvent('click', onBtnClose.bind(this));
								
								
								/* ** click on next btn ** */
								this.btnNext.addEvent('click', function(e){
									e.stopPropagation();
									$clear(this.seeNextTimer);
									
									this.img.fade(0);
									
									if(this.currentIndex < (this.thumbs.length-1)){ 
										this.currentIndex++;
									}else{ 
										this.currentIndex = 0;
									}
									
									this._changeImg.delay(500, this);
									
									this.seeNextTimer = this._seeNext.periodical(this.options.interval, this);
									
								}.bind(this));
								
								
								
								this.btnPrevious.addEvent('click', function(e){
									e.stopPropagation();
									$clear(this.seeNextTimer);
									
									this.img.fade(0);
									
									if(this.currentIndex == 0){ 
										this.currentIndex = this.src.length-1;
									}else{ 
										this.currentIndex--;
									}
									
									this._changeImg.delay(500, this);
									
									this.seeNextTimer = this._seeNext.periodical(this.options.interval, this);
								
								}.bind(this));
								
								
								
								var createImg = function(){ 
									
									this.currentIndex = this._getInitialCurrentIndex(event.target.getParent('a'), this.links); 
									
									this.img = new Element('img', {
										'src' : this.src[this.currentIndex],
										'opacity' : 0
									});
								
									this.img.inject(this.p, 'top');

									var marginT = (this.container.getSize().y - this.img.getSize().y) / 2;

									var appear = function(){ 
										this.img.setStyles({
											'margin-top' : marginT
										}); 
										this.img.fade(1);
										this.seeNextTimer = this._seeNext.periodical(this.options.interval, this);
									}

									var imgAppear = appear.delay(400, this);
								
								}

								var imgs = createImg.delay(800, this);
							
							
						}
					
						link.addEvent('click', onClick.bind(this));
					
					}, this);
					
				}.bind(this)
				
		}, this);
		
	}
	
	
});